<template>
	<a-layout style="height:100%" id="components-layout-demo-custom-trigger">
		<a-layout-sider v-model="collapsed" :trigger="null" collapsible>
		<div class="logo">哈哈怪</div>
		
		<ul role="menu" class="ant-menu ant-menu-inline ant-menu-root ant-menu-dark">
			<li role="menuitem" class="ant-menu-item">
				<router-link to="/index/goods">
					<a-icon type="gift" />
					<span v-if="!collapsed">商品管理</span>
				</router-link>
			</li>
		</ul>
		</a-layout-sider>
		<a-layout>
		<a-layout-header style="background: #fff; padding: 0">
			<a-icon
			class="trigger"
			:type="collapsed ? 'menu-unfold' : 'menu-fold'"
			@click="() => (collapsed = !collapsed)"
			/>

			<!-- <a-icon type="poweroff" class="f-r logout" @click="logout" /> -->
			<a-dropdown>
				<a-avatar style="backgroundColor:#87d068;float:right;margin-right:20px;margin-top:20px;" icon="user" />
				<a-menu slot="overlay">
					<a-menu-item key="0">
						<a href="javascript:;" @click="visible=true">修改密码</a>
					</a-menu-item>
					<a-menu-divider />
					<a-menu-item key="3" @click="logout">
						退出登录
					</a-menu-item>
					</a-menu>
			</a-dropdown>
		</a-layout-header>
		<a-layout-content
			:style="{ margin: '16px 0 16px 16px', padding: '0', background: '#fff', minHeight: '280px' }"
		>
			<router-view></router-view>
		</a-layout-content>
		</a-layout>

		<a-modal
			title="修改密码"
			:visible="visible"
			@cancel="visible=false"
			@ok="updatePassword"
			>
			<div style="margin-bottom: 16px">
				<a-input-password addon-before="-原 密 码" v-model="oldPass" />
			</div>
			<div style="margin-bottom: 16px">
				<a-input-password addon-before="-新 密 码" v-model="pass" />
			</div>
			<div style="margin-bottom: 16px">
				<a-input-password addon-before="确认密码" v-model="repass" />
			</div>
		</a-modal>
	</a-layout>
</template>

<script>
import { messageTips } from '../../until/tools';
export default {
    data() {
		return {
			collapsed: false,
			visible:false,
			oldPass:'',
			pass:'',
			repass:''
		};
	},
	methods:{
		logout() {
			this.$http.userLogout().then(res=>{
				if(res.success) {
					messageTips(res.message,3);
					setTimeout(()=>{
						this.$router.push('/login');
					},1000);
				}
			})
		},
		updatePassword() {
			if(this.oldPass==='') {
				messageTips('请输入原密码',2);
				return false;
			}
			if(this.pass==='') {
				messageTips('请输入新密码',2);
				return false;
			}
			if(this.repass==='') {
				messageTips('请确认密码',2);
				return false;
			}
			if(this.repass!==this.pass) {
				messageTips('两次密码不一致',2);
				return false;
			}

			this.$http.updatePass({oldPass:this.oldPass,pass:this.pass}).then(res=>{
				if(res) {
					if(res.success) {
						messageTips(res.message,3);
						setTimeout(()=>{
							this.$router.push('/login');
						},1000);
					} else {
						messageTips(res.message,1);
					}
				}
			})
		}
	}
}
</script>

<style lang="scss">
@import '../../scss/_variables.scss';
	#components-layout-demo-custom-trigger .trigger {
		font-size: 18px;
		line-height: 64px;
		padding: 0 24px;
		cursor: pointer;
		transition: color 0.3s;
	}

	#components-layout-demo-custom-trigger .trigger:hover {
		color: $primary-color;
	}

	#components-layout-demo-custom-trigger .logo {
		height: 32px;
		background: rgba(255, 255, 255, 0.2);
		margin: 16px;
		line-height: 32px;
		text-align: center;
		color:#fff;
	}
	.router-link-active {
		background:$primary-color;
	}
	.ant-layout-sider-children {
		.ant-menu-inline .ant-menu-item {
			padding:0;
			a {
				padding:0 16px;
			}
		}
	}
</style>